<template>
  <div>
    <el-button class="butt" @click="visible = true">
      <el-icon><More /></el-icon>
    </el-button>
    <el-dialog v-model="visible" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <h3>歌单简介</h3>
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">{{ description }}</h4>
          <el-button type="danger" @click="close">
            <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
            退出
          </el-button>
        </div>
      </template>
      轻音播放器
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref, toRefs } from "vue";
import { ElButton, ElDialog } from "element-plus";
import { CircleCloseFilled, More } from "@element-plus/icons-vue";
const props = defineProps({
  description: String,
});
const { description } = toRefs(props);
const visible = ref(false);
</script>

<style scoped>
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.butt {
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
</style>
